<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 菜单管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- <div class="handle-box" style="margin-bottom: 10px;background: pink;">
                <el-button type="primary" style="float: right;margin-right: 35px;margin-top: 5px;" icon="el-icon-lx-roundadd" @click="handlerInsert">添加菜单</el-button>
        </div> -->
        <div class="handle-box" style="margin-bottom: 10px; background: pink">
            <el-button type="primary" style="float: right; margin-right: 5px; margin-top: 5px" icon="el-icon-lx-edit" @click="handlerEdit"
                >菜单编辑</el-button
            >
        </div>

        <div class="container">
            <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px; margin-top: 10px"
                row-key="menuId"
                border
                :tree-props="{ children: 'subs', hasChildren: 'hasChildren' }"
            >
                <el-table-column width="240px" prop="title" align="center" label="标题"> </el-table-column>
                <el-table-column prop="permVal" label="权限值" align="center"> </el-table-column>
                <el-table-column prop="index" label="路由索引" align="center"> </el-table-column>
                <el-table-column prop="icon" label="图标" align="center"> </el-table-column>
                <el-table-column label="类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.typeLevel == 1">菜单</span>
                        <span v-if="scope.row.typeLevel == 2">权限</span>
                    </template>
                </el-table-column>

                <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name: 'menu',
    created() {},
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            vm.getData();
        });
    },
    methods: {
        getData() {
            //这里要进行数据的初始化
            this.$axios.get('/api/permMenuService/permMenu/list.action').then(
                (resp) => {
                    if (!resp.data.code) {
                        //说明成功
                        this.tableData = resp.data.dataMap.menuList;
                    } else {
                        this.$message.error('初始化菜单权限信息失败....');
                    }
                },
                (error) => {
                    this.$message.error('初始化菜单权限信息失败....:' + error.message);
                }
            );
        },
        handlerInsert() {
            this.$router.replace({
                name: 'menuAdd'
            });
        },
        handlerEdit() {
            this.$router.replace({
                name: 'menuEdit'
            });
        }
    },
    data() {
        return {
            tableData: []
        };
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
， .container {
    display: flex; /* 设置为flex布局 */
    justify-content: flex-end; /* 水平居右对齐 */
}
</style>